/*
 * @Author: Zhang Kai
 * @Date: 2021-10-26 14:58:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-01 14:59:11
 * @FilePath: /metricsx-standard-ui/src/components/Table/index.tsx
 */
import { defineComponent, PropType, ref } from 'vue';
import '@/components/Table/index.scss';
import Pagination from '@/components/Pagination/index';
import { ElPagination, ElTable, ElTableColumn } from 'element-plus/lib/index';
const Table = defineComponent({
  name: 'Table',
  props: {
    pagination: { ...ElPagination.props },
    ...ElTable.props,
    /* table Data */
    data: {
      type: Array,
      default: () => [],
      required: true
    },
    /* table 列 */
    column: {
      type: Array,
      default: () => [],
      required: true
    },
    tableRef: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['pageCurrentChange', 'pageSizeChange'],
  setup: (props, { slots, attrs, emit }) => {
    const renderTable = () => {
      // 支持 模板的语法
      if (slots.columns) {
        return slots.columns && slots.columns();
      }
      const { rowKey } = props;
      const { column = [] } = props;
      return column.map((col: any, index: number) => {
        // TODO: 没有做更好的校验
        const { render, slotRenderName, ...otherCol } = col;
        const key = col[rowKey] || col.key || col.prop || index; // 每一个 columns 的 key
        const newCol = { ...otherCol, key }; // 一个新的 col
        /* 支持 jsx column使用default函数 */
        if (col.default) {
          newCol.slots = col.default;
        }
        /* 支持 jsx column使用header函数自定义表头 */
        if (col.header) {
          newCol.slots = { header: col.header };
        }
        /* 支持 slotRenderName */
        if (col.slotRenderName) {
          newCol.slots = { default: slots[col.slotRenderName] };
        }
        // 支持 prop 传参为 string[]
        if (col.prop instanceof Array) {
          newCol.prop = col.prop.join('.');
          newCol.slots = {
            default: ({ row }: any) => {
              let current = row;
              for (let i = 0; i < col.prop.length; i++) {
                if (!current) return null;
                const prop = col.prop[i];
                current = current[prop];
              }
              return current;
            }
          };
        }
        return (
          <ElTableColumn
            show-overflow-tooltip
            {...newCol}
            key={index}
            v-slots={newCol.slots}
          ></ElTableColumn>
        );
      });
    };
    return () => {
      const { pagination, data, column, tableRef, ...restProps } = props;
      return (
        <div class="table-container">
          <el-table ref={tableRef} data={data} {...restProps} {...attrs}>
            {renderTable}
          </el-table>
          {pagination?.total > 0 && (
            <div class="Pagination">
              <Pagination
                {...pagination}
                onCurrentChange={(page: number) =>
                  emit('pageCurrentChange', page)
                }
                onSizeChange={(size: number) => emit('pageSizeChange', size)}
              />
            </div>
          )}
        </div>
      );
    };
  }
});

export default Table;
